<template>
  <div>
    <!--外层容器 -->
    <el-container>
      <!--上半部分-->
      <el-header class="lay-header">

            <h1 style="margin: 0">先锋进销存管理平台
              <span style="margin: 0 0 0 1000px;position: absolute;" >
                 <el-button type="text" @click="dialogVisible = true">
                   <el-avatar :src="user.avatar" title="个人中心"></el-avatar>
                 </el-button>
          <el-dialog
              :visible.sync="dialogVisible"
              width="25%"
              align="center"
              style="margin-left: 880px;padding: 0">
            <a href="/sys-admin/temp/user/list/userinfo">个人资料设置</a><br>
            <a href="javascript:void(0)" @click="logout()">退出登录</a>
          </el-dialog>
              </span>
              <span style="margin: 0 0 0 1050px;position: absolute;font-size: 15px">欢迎{{user.username}}回来</span>
            </h1>

      </el-header>
      <!--下半部分-->
      <el-container class="lay-body" >
        <!--左部分-->
        <el-aside  class="lay-aside">
          <!--获取当前路径-->
          <el-menu
              router
              :default-active="activeMenuItemPath"
              class="el-menu-vertical-demo"
              background-color=" #222c32"
              text-color="#fff"
              active-text-color="#ffd04b">
            <el-menu-item index="/sys-admin">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/sys-admin/temp/user/list">
                <i class="el-icon-setting"></i>
                <span slot="title">用户列表</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/role/list">
                <i class="el-icon-setting"></i>
                <span slot="title">用户角色</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/log/list">
                <i class="el-icon-setting"></i>
                <span slot="title">操作日志</span>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-shopping-cart-full"></i>
                <span>采购管理</span>
              </template>
              <el-menu-item index="/sys-admin/other">
                <i class="el-icon-setting"></i>
                <span slot="title">采购单管理</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/other">
                <i class="el-icon-setting"></i>
                <span slot="title">供应商管理</span>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-truck"></i>
                <span>销售管理</span>
              </template>
              <el-menu-item index="/sys-sales/temp/sales/add-new">销售制单</el-menu-item>
              <el-menu-item index="/sys-sales/temp/sales/list">销售单列表</el-menu-item>
              <el-menu-item index="/sys-sales/temp/customer/list">客户列表</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-check"></i>
                <span>审核管理</span>
              </template>
              <el-menu-item index="/sys-admin/other">采购单审核</el-menu-item>
              <el-menu-item index="/sys-admin/other">销售单审核</el-menu-item>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-box"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/sys-product/temp/product/list">商品列表</el-menu-item>
              <el-menu-item index="/sys-product/temp/product/add-new1">添加商品</el-menu-item>
              <el-menu-item index="/sys-product/temp/category/list">类别列表</el-menu-item>
              <el-menu-item index="6-3">商品入库</el-menu-item>
              <el-menu-item index="6-4">商品出库</el-menu-item>
            </el-submenu>
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-notebook-2"></i>
                <span>报表管理</span>
              </template>
              <el-menu-item index="7-1">采购单汇总</el-menu-item>
              <el-menu-item index="7-2">销售单汇总</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <!--右部分-->
        <el-main class="lay-main">
          <router-view/>

        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
export default {
  data(){
    return{
      activeMenuItemPath:'',
      user:{},
      dialogVisible: false
    }
  },
  mounted() {
    let path =this.$router.currentRoute.path
    if ((path.startsWith('/sys-product/temp/product/add-new1'))){
      this.activeMenuItemPath = "/sys-product/temp/product/add-new1";
    }else if ((path.startsWith('/sys-admin/temp/user/list'))) {
      this.activeMenuItemPath ="/sys-admin/temp/user/list"
    } else if ((path.startsWith('/sys-admin/temp/role/list'))) {
      this.activeMenuItemPath ="/sys-admin/temp/role/list"
    }else {
      this.activeMenuItemPath = path;
    }
    this.currentUser();
  },
  methods:{
    logout(){
      localStorage.removeItem('jwt');
      this.$router.push('/login');
    },
    currentUser(){
      let url = 'http://localhost:8080/users/currentUser';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
            this.user=response.data.data;
      })
    }
  }
}
</script>

<style>
.lay-header {
  background: #002323;
}
.lay-header h1{
  color: #fff;
  text-align: left;
  line-height: 60px;
}
.lay-body{
  /*高度设为整个屏幕*/
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;

}

.lay-aside {
  background: #222c32;
}

.lay-main {

}
body{
  margin: 0;
}

.el-menu-item.is-active{
  background-color: #1d0236 !important;
}
</style>